<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="550"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    // Use a font that is commonly available and supports Chinese characters
    ctx.font = '24px "KaiTi", "SimSun", sans-serif';

    // --- Helper Functions ---

    /**
     * Draws a line with an arrowhead at the end.
     * @param {number} fromX - Starting x-coordinate.
     * @param {number} fromY - Starting y-coordinate.
     * @param {number} toX - Ending x-coordinate.
     * @param {number} toY - Ending y-coordinate.
     */
    function drawArrow(fromX, fromY, toX, toY) {
        const headLength = 10; // Length of the arrowhead
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        
        // Draw the arrowhead
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }

    /**
     * Draws a coated beam splitter (tilted rectangle with hatches).
     * @param {number} centerX - The x-coordinate of the center of the splitter.
     * @param {number} centerY - The y-coordinate of the center of the splitter.
     * @param {number} width - The width of the splitter rectangle.
     * @param {number} height - The height of the splitter rectangle.
     */
    function drawSplitter(centerX, centerY, width, height) {
        ctx.save();
        
        // Move to the center and rotate
        ctx.translate(centerX, centerY);
        ctx.rotate(Math.PI / 4); // 45 degrees rotation

        // Draw the main rectangle body
        ctx.beginPath();
        ctx.rect(-width / 2, -height / 2, width, height);
        ctx.fillStyle = '#f0f0f0'; // Light gray fill to represent glass
        ctx.fill();
        ctx.stroke();

        // Draw the hatches for the coating
        const hatchSpacing = 8;
        const hatchLength = 6;
        ctx.beginPath();
        for (let i = -width / 2; i <= width / 2; i += hatchSpacing) {
            ctx.moveTo(i, -height / 2);
            ctx.lineTo(i, -height / 2 - hatchLength);
        }
        ctx.stroke();
        
        ctx.restore();
    }

    // --- Main Drawing Logic ---
    const centerX = 220;
    const startY = 50;
    const topSplitterY = 150;
    const bottomSplitterY = 320;
    const endY = 450;
    const reflectedEndX = 400;

    const splitterWidth = 140;
    const splitterHeight = 20;

    // 1. Incoming White Light Beam
    drawArrow(centerX, startY, centerX, topSplitterY);
    ctx.fillText('白光', centerX + 25, 90);

    // 2. Top Beam Splitter
    drawSplitter(centerX, topSplitterY, splitterWidth, splitterHeight);
    
    // 3. Reflected Red Light Beam
    drawArrow(centerX, topSplitterY, reflectedEndX, topSplitterY);
    ctx.fillText('红光', centerX + 90, topSplitterY - 15);

    // 4. Transmitted light path between splitters
    ctx.beginPath();
    ctx.moveTo(centerX, topSplitterY);
    ctx.lineTo(centerX, bottomSplitterY);
    ctx.stroke();
    
    // 5. Bottom Beam Splitter
    drawSplitter(centerX, bottomSplitterY, splitterWidth, splitterHeight);
    
    // 6. Reflected Green Light Beam
    drawArrow(centerX, bottomSplitterY, reflectedEndX, bottomSplitterY);
    ctx.fillText('绿光', centerX + 90, bottomSplitterY - 15);
    
    // 7. Final Transmitted Light Beam
    drawArrow(centerX, bottomSplitterY, centerX, endY);

    // 8. Caption at the bottom
    ctx.fillText('习题 12-18 图', centerX - 80, endY + 50);

</script>

</body>
</html>